

import React from 'react';
import { View, Text, ScrollView, StyleSheet, TouchableOpacity, TouchableWithoutFeedback, FlatList } from 'react-native';
import { Container, Content, Icon } from 'native-base';
import { BoxShadow } from 'react-native-shadow';
import moment from 'moment';

import { Loading, EmptyComponent } from '../../component';
import { Colors, Metrics } from '../../theme';
import Http from '../../utils/HttpPost';

class MyMessage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            myMessageList: [
                
            ]
        }
    }

    componentDidMount() {
        this.initList();
    }



    /**
     * 初始化公告列表
     */
    initList() {
        // this.setState({isLoading: true})
        // Http('post',"/user/regist", {
        // }).then(res => {
        // 	this.setState({isLoading: false})
        // 	if (res.code === 200) {

        // 	}
        // })
    }

    /**
     * 渲染我的消息Item
     */
    renderItem(item) {
        const shadowOpt = {
            height: 66,
            width: Metrics.screenWidth - 20,
            color: Colors.subject,
            border: 2,
            radius: 6,
            opacity: 0.2,
            x: 0,
            y: 0,
            style: Styles.transactionContainer
        }
        return (
            <TouchableOpacity
                onPress={() => this.props.navigate('MessageDetails', { params: item })}
            >
                <BoxShadow setting={shadowOpt}>
                    <View style={Styles.noticeItemCont}>
                        <View style={Styles.verticalLine} />
                        <View style={Styles.itemStyle}>
                            <Text allowFontScaling={false} style={Styles.title} numberOfLines={1}>{item.content}</Text>
                            <Text allowFontScaling={false} style={Styles.text}>
                                {/* {moment(item.ceratedAt).format("YYYY-MM-DD HH:mm:ss")} */}
                                {item.ceratedAt}
                            </Text>
                        </View>
                        <Icon type="FontAwesome" name='angle-right' style={Styles.rightIcon} />
                    </View>
                </BoxShadow>
            </TouchableOpacity>
        )
    }

    // FlatList 循环 key
    _extraUniqueKey(item, index) {
        return "index" + index + item;
    }

    render() {
        return (
            <View style={Styles.container}>
                <FlatList
                    data={this.state.myMessageList}
                    keyExtractor={this._extraUniqueKey}
                    refreshing={this.state.refreshing}
                    onEndReachedThreshold={0.5}
                    renderItem={({ item, index }) => (
                        this.renderItem(item)
                    )}
                />
            </View>
        )
    }
}

export default MyMessage;

const Styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.bai,
    },
    noticeItemCont: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        backgroundColor: Colors.bai,
    },
    rightIcon: {fontSize: Metrics.fontSize20, color: Colors.hei1, marginRight: 18},
    transactionContainer: { left: 10, marginBottom: 10 },
    itemStyle: { flex: 1,paddingRight: 15,marginLeft: 15,justifyContent: 'center' },
    verticalLine: { height: 28, width: 3, borderRadius: 6, backgroundColor: Colors.C1 },
    title: { fontSize: 14, lineHeight: 40, color: Colors.hei1 },
    text: { fontSize: 12, marginTop: 6, lineHeight: 20,  color: Colors.C1 }
});



